<template>
	<view>
		<!-- 邀约弹窗 -->
		<tui-drawer mode="bottom" :maskZIndex="999990" :zIndex="999999" :visible="visible" @close="closeDrawer">
			<view class="invite-container">
				<view class="title">
					<text class="titleTxt">教练邀约</text>
					<view class="close" @tap="closeDrawer">
						<image class="closeImg" src="/static/user/icon_off@2x.png"></image>
					</view>
				</view>
				<view class="invite-content">
					<InviteItem :assistantId="assistantId" :hours="hours" ref="inviteItemRef" :categoryId="categoryId">
					</InviteItem>
				</view>
				<view class="inite-agreement">
					<view class="contents">
						<view @tap="isAgreement=!isAgreement" :class="isAgreement ? 'checked':'isChecked'"></view>
						<view class="agreement_content">
							<text>已阅读并同意</text>
							<text class="place" @tap="orderInstructions(3)">《下单须知》</text>
							<text>与</text>
							<text class="rule" @tap="orderInstructions(4)">《计费规则》</text>
						</view>
					</view>
				</view>
				<tui-form-button @click="inviteVerify" radius="20rpx" size="32" color="#fff" width="690rpx"
					height="84rpx" background="#2FD7D3">
					<tui-icon name="alarm" color="#fff" :size="28" margin="0 8rpx 0 0"></tui-icon>
					确认邀约
				</tui-form-button>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import InviteItem from './compontents/inviteItem.vue';
	import {
		invitePlace
	} from "@/http/api/order/order.js"
	import {
		getLoginAutoInfo
	} from '@/http/api/tutor/tutor.js'
	import Cache from '@/utils/cache'
	export default {
		name: 'TutorInvite',
		emits: ['clear', 'confimInvite'],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			//分类id
			categoryId: {
				type: String,
				default: ''
			},
			//教练id
			assistantId: {
				type: String,
				default: ''
			},
			hours: {
				type: Array,
				default: []
			},
			//商家id
			merchantId: {
				type: String,
				default: ''
			}
		},
		components: {
			InviteItem
		},
		data() {
			return {
				isAgreement: false,
			};
		},
		destroyed() {
			uni.$off('adressInfo')
		},
		mounted() {
			console.log('初始化')

		},
		watch: {
			visible: {
				handler(e) {
					console.log(e)
					this.$refs.inviteItemRef.reload()
					uni.$on('adressInfo', (e) => {
						console.log(e, '监听')
						this.$refs.inviteItemRef.tutorPlaceData.merchantInfo.latitude = e.latitude
						this.$refs.inviteItemRef.tutorPlaceData.merchantInfo.longitude = e.longitude
						this.$refs.inviteItemRef.tutorPlaceData.merchantInfo.address = e.name
						this.$refs.inviteItemRef.addressInfo = e
					})

					getLoginAutoInfo().then(res => {
						console.log(res.code)
						if (res.code === 200) {
							this.$refs.inviteItemRef.tutorPlaceData.merchantInfo.longitude = Cache.get(
									'longitude') ||
								'116.25'
							this.$refs.inviteItemRef.tutorPlaceData.merchantInfo.latitude = Cache.get(
									'latitude') ||
								'39.54'
							this.$refs.inviteItemRef.tutorPlaceData.merchantInfo.address = Cache.get(
									'adressNmae') ||
								''

							this.$refs.inviteItemRef.tutorPlaceData.subscribePhone = res.data && res.data
								.subscribePhone || ''
							this.$refs.inviteItemRef.tutorPlaceData.appellation = res.data && res.data
								.appellation ||
								''
						}

					})
				},
				deep: true,
				immediate: false
			}
		},
		methods: {
			hasMobilePhone(str) {
				// 正则表达式匹配手机号，确保前后无其他数字
				const pattern = /(?:^|\D)(1[3-9]\d{9})(?:\D|$)/;
				return pattern.test(str);
			},
			orderInstructions(type) {
				uni.navigateTo({
					url: '/pages/mine/modules/richText/richText?type=' + type
				})
			},
			closeDrawer() {
				this.$refs.inviteItemRef.$refs.TimeRef.keyTime = {}
				this.$refs.inviteItemRef.isPlace = false

				this.$emit('clear')
			},
			inviteVerify() {
				let that = this
				let info = that.$refs.inviteItemRef.tutorPlaceData
				if (!info.startTime) {
					that.$utils.toast('请选择预约时间');

					return;
				}
				if (!info.hours) {
					that.$utils.toast('请选择预约时长');
					return;
				}
				if (!info.merchantInfo.address) {
					that.$utils.toast('请选择地址');
					return;
				}
				if (!info.appellation) {
					that.$utils.toast('请输入您的称呼');
					return;
				}
				if (!info.subscribePhone) {
					that.$utils.toast('请输入预约电话');
					return;
				}
				if (info.remark) {
					if (that.hasMobilePhone(info.remark)) {
						that.$utils.toast('备注不能存在手机号');
						return;
					}
				}
				invitePlace({
					...info,
					assistantId: that.assistantId,
					merchantId: that.merchantId
				}).then(res => {
					if (res.code === 200) {
						that.$utils.toast('邀约成功');
						that.$emit('confimInvite')
						that.$refs.inviteItemRef.reload()
					}
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	.invite-container {
		padding: 0 30rpx 8rpx 30rpx;
		padding-bottom: 60rpx;

		.inite-agreement {
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.contents {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				align-items: center;
				display: flex;

				.checked {
					width: 24rpx;
					height: 24rpx;
					background: #E7E7E7;
					border-radius: 50%;
					border: 4rpx solid #F5F5F5;
				}

				.isChecked {
					width: 24rpx;
					height: 24rpx;
					background: #2FD7D3;
					border-radius: 50%;
					border: 4rpx solid #F5F5F5;
				}

				.agreement_content {
					display: flex;
					align-items: center;
					margin-left: 12rpx;

					.place {
						color: #FF9F29;
					}

					.rule {
						color: #FF9F29;
					}
				}
			}
		}

		.title {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: center;
			/* 使所有内容居中 */
			position: relative;

			/* 相对定位父容器，方便定位图标 */
			.titleTxt {
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				flex: 1;
				/* 标题占据剩余空间 */
				text-align: center;
				/* 标题居中 */
			}

			.close {
				position: absolute;
				/* 绝对定位图标 */
				right: 0;
				/* 图标右对齐 */
				width: 48rpx;
				height: 48rpx;

				.closeImg {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>